import { useEffect, useRef, useState, useCallback } from 'react';
import './DiseaseBigData.css';
import * as echarts from 'echarts';
import axios from 'axios';

function DiseaseBigData() {
    // 获取 Dom 节点
    const chartTopItemOne = useRef(null);
    const chartTopItemTwo = useRef(null);
    const chartTopItemThree = useRef(null);
    const chartTopItemFour = useRef(null);
    const chartMiddleLeftItemOne = useRef(null);
    const chartMiddleLeftItemTwo = useRef(null);
    const chartBottom = useRef(null);
    // 今日医生数据
    const [doctorData, setDoctorData] = useState([]);
    // 等待数据
    const [registerCharts, setRegisterCharts] = useState({});
    // 医疗器材消耗
    const [equipCharts, setEquipCharts] = useState({});
    // 加载状态
    const [isLoading, setIsLoading] = useState(true);
    // 药材消耗
    const [drugsCharts, setDrugsCharts] = useState({});
    // 疫苗综合消耗
    const [vaccinesCharts, setVaccinesCharts] = useState({});
    // 当前科室 top3
    const [curTopThree, setCurTopThree] = useState([]);
    // 本周科室 top3
    const [weekTopThree, setWeekTopThree] = useState([]);
    // 各科室数据
    const [typeCharts, setTypeCharts] = useState([]);

    const fetchData = useCallback(() => {
        return axios.get('http://8.148.7.123:8000/infomationcenter/disease');
    }, []);

    useEffect(() => {
        try {
            fetchData().then(res => {
                setDoctorData(res.data.data.doctorList);
                setRegisterCharts(res.data.data.registerCharts);
                setEquipCharts(res.data.data.equipCharts);
                setDrugsCharts(res.data.data.drugsCharts);
                setVaccinesCharts(res.data.data.vaccinesCharts);
                setCurTopThree(res.data.data.curTop3);
                setWeekTopThree(res.data.data.weekTop3);
                setTypeCharts(res.data.data.typeCharts);
                setIsLoading(false);
            });
        } catch (error) {
            console.log(error);
            setIsLoading(false);
        }
    }, [fetchData]);

    useEffect(() => {
        if (chartTopItemOne.current) {
            const myChartOne = echarts.init(chartTopItemOne.current);
            const optionOne = {
                polar: {
                    radius: [10, '80%'],
                },
                angleAxis: {
                    max: 550,
                    startAngle: 75,
                },
                radiusAxis: {
                    type: 'category',
                    data: registerCharts.type? registerCharts.type : [],
                },
                tooltip: {},
                series: {
                    type: 'bar',
                    data: registerCharts.data? registerCharts.data : [],
                    coordinateSystem: 'polar',
                    label: {
                        show: true,
                        position: 'middle',
                        formatter: '{b}: {c}',
                    },
                },
            };
            // 设置图表选项
            optionOne && myChartOne.setOption(optionOne);
        }
        if (chartTopItemTwo.current) {
            const myChartTwo = echarts.init(chartTopItemTwo.current);
            const optionTwo = {
                title: [
                    {
                        text: equipCharts.total,
                        subtext: '医疗器材消耗',
                    },
                ],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: equipCharts.type,
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: equipCharts.data,
                        type: 'line',
                        areaStyle: {},
                    },
                ],
            };
            optionTwo && myChartTwo.setOption(optionTwo);
        }
        if (chartTopItemThree.current) {
            const myChartThree = echarts.init(chartTopItemThree.current);
            const optionThree = {
                title: [
                    {
                        text: drugsCharts.total,
                        subtext: '药品消耗',
                    },
                ],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: drugsCharts.type,
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: drugsCharts.data,
                        type: 'line',
                        areaStyle: {},
                    },
                ],
            };
            optionThree && myChartThree.setOption(optionThree);
        }
        if (chartTopItemFour.current) {
            const myChartFour = echarts.init(chartTopItemFour.current);
            const optionFour = {
                title: [
                    {
                        text: vaccinesCharts.total,
                        subtext: '疫苗综合消耗',
                    },
                ],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: vaccinesCharts.type,
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: vaccinesCharts.data,
                        type: 'line',
                        areaStyle: {},
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                const xAxisData = optionFour.xAxis.data;
                                const index = xAxisData.indexOf(params.name);
                                return xAxisData[index] + ': ' + params.value;
                            },
                        },
                    },
                ],
            };
            optionFour && myChartFour.setOption(optionFour);
        }
        if (chartMiddleLeftItemOne.current) {
            const myChartMiddleLeftItemOne = echarts.init(chartMiddleLeftItemOne.current);
            const optionMiddleLeftItemOne = {
                title: [
                    {
                        text: '当前科室 TOP3',
                        left: 'center',
                    },
                ],
                polar: {
                    radius: [10, '75%'],
                },
                radiusAxis: {
                    max: 600,
                },
                angleAxis: {
                    type: 'category',
                    data: [...curTopThree.map(item => item.name)],
                    startAngle: 75,
                },
                tooltip: {},
                series: {
                    type: 'bar',
                    data: [...curTopThree.map(item => item.value)],
                    coordinateSystem: 'polar',
                    label: {
                        show: true,
                        position: 'middle',
                        formatter: '{b}: {c}',
                    },
                },
                animation: false,
            };
            optionMiddleLeftItemOne && myChartMiddleLeftItemOne.setOption(optionMiddleLeftItemOne);
        }
        if (chartMiddleLeftItemTwo.current) {
            const myChartMiddleLeftItemTwo = echarts.init(chartMiddleLeftItemTwo.current);
            const optionMiddleLeftItemTwo = {
                title: [
                    {
                        text: '本周科室 TOP3',
                        left: 'center',
                    },
                ],
                polar: {
                    radius: [10, '75%'],
                },
                radiusAxis: {
                    max: 6000,
                },
                angleAxis: {
                    type: 'category',
                    data: [...weekTopThree.map(item => item.name)],
                    startAngle: 75,
                },
                tooltip: {},
                series: {
                    type: 'bar',
                    data: [...weekTopThree.map(item => item.value)],
                    coordinateSystem: 'polar',
                    label: {
                        show: true,
                        position: 'middle',
                        formatter: '{b}: {c}',
                    },
                },
                animation: false,
            };
            optionMiddleLeftItemTwo && myChartMiddleLeftItemTwo.setOption(optionMiddleLeftItemTwo);
        }
        if (chartBottom.current) {
            const myChartBottom = echarts.init(chartBottom.current);
            const optionBottom = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '等候人次', '待缴费', '复诊'],
                        ...convertTypeChartsData(typeCharts),
                    ],
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
            };
            optionBottom && myChartBottom.setOption(optionBottom);
        }
    }, [registerCharts, typeCharts]);

    function convertTypeChartsData(typeCharts) {
        const result = [];
        if (typeCharts && typeCharts.type && typeCharts.repeatdata && typeCharts.waitdata && typeCharts.waitpaydata) {
            for (let i = 0; i < typeCharts.type.length; i++) {
                result.push([typeCharts.type[i], typeCharts.waitdata[i], typeCharts.waitpaydata[i], typeCharts.repeatdata[i]]);
            }
        }
        return result;
    }

    return (
        <div className="DiseaseBigDataBox">
            <div className="DiseaseBigDataTop">
                <div className="DiseaseBigDataTopItem">
                    <div ref={chartTopItemOne} className="DiseaseBigDataTopItemChart"></div>
                </div>
                <div className="DiseaseBigDataTopItem">
                    <div ref={chartTopItemTwo} className="DiseaseBigDataTopItemChart"></div>
                </div>
                <div className="DiseaseBigDataTopItem">
                    <div ref={chartTopItemThree} className="DiseaseBigDataTopItemChart"></div>
                </div>
                <div className="DiseaseBigDataTopItem">
                    <div ref={chartTopItemFour} className="DiseaseBigDataTopItemChart"></div>
                </div>
            </div>
            <div className="DiseaseBigDataMiddle">
                <div className="DiseaseBigDataMiddleLeft">
                    <div className="DiseaseBigDataMiddleLeftItem">
                        <div ref={chartMiddleLeftItemOne} className="DiseaseBigDataMiddleLeftItemChart"></div>
                    </div>
                    <div className="DiseaseBigDataMiddleLeftItem">
                        <div ref={chartMiddleLeftItemTwo} className="DiseaseBigDataMiddleLeftItemChart"></div>
                    </div>
                </div>
                <div className="DiseaseBigDataMiddleRight">
                    <div className='DiseaseBigDataMiddleRightTitle'>今日医生</div>
                    <div className='DiseaseBigDataMiddleRightItem'>
                        <div className='DiseaseBigDataMiddleRightItemTitle'>医生</div>
                        <div className='DiseaseBigDataMiddleRightItemTitle'>科室</div>
                        <div className='DiseaseBigDataMiddleRightItemTitle'>看诊人次</div>
                        <div className='DiseaseBigDataMiddleRightItemTitle'>本周处方</div>
                        <div className='DiseaseBigDataMiddleRightItemTitle'>患者满意度</div>
                        <div className='DiseaseBigDataMiddleRightItemTitle'>医院评级</div>
                    </div>
                    {
                        isLoading? null : doctorData.map(item => {
                            return (
                                <div className='DiseaseBigDataMiddleRightItem' key={item.name}>
                                    <div className="DiseaseBigDataMiddleRightItemList">{item.name}</div>
                                    <div className="DiseaseBigDataMiddleRightItemList">{item.department}</div>
                                    <div className="DiseaseBigDataMiddleRightItemList">{item.count}</div>
                                    <div className="DiseaseBigDataMiddleRightItemList">{item.file}</div>
                                    <div className="DiseaseBigDataMiddleRightItemList">{item.rating}</div>
                                    <div className="DiseaseBigDataMiddleRightItemList">{item.type}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <div className="DiseaseBigDataBottom">
                <div ref={chartBottom} className="DiseaseBigDataBottomChart"></div>
            </div>
        </div>
    );
}

export default DiseaseBigData;